import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
import { withRouter } from 'react-router-dom';
import "../../styles/Index/Tabbar.scss"

import {
    AppOutline,
    AppstoreOutline,
    ShopbagOutline,
    UserOutline,
} from 'antd-mobile-icons'

class Tabbar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabs: [
                {
                    key: '/index/home',
                    title: '首页',
                    icon: <AppOutline />
                },
                {
                    key: '/index/cate',
                    title: '分类',
                    icon: <AppstoreOutline />
                },
                {
                    key: '/index/shopcart',
                    title: '购物车',
                    icon: <ShopbagOutline />
                },
                {
                    key: '/index/mine',
                    title: '我的',
                    icon: <UserOutline />,
                },
            ]
        }
    }
    render() {
        return (
            <div className='tabbar'>
                <TabBar onChange={(key)=>{this.props.history.push(key)}}>
                    {this.state.tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    ))}
                </TabBar>
            </div>
        );
    }
}

export default withRouter(Tabbar);